<!DOCTYPE html>
<html>
	<head>
		{// 引用头部文件，通常把通用的html代码块放到一个文件里面，使用include标签引用。}
		{include file="common/head"}
	</head>
	<body>
		<div class="body-inner">
			<!--引用导航栏、路径基于主题目录下common文件夹下的menu.html文件-->
			{include file="common/menu"}

			<main>    
				<!-- HERO -->
				<section id="hero" class="section-hero">
					{hkcms:adv name="home_background_video" num="1"}
					<video class="hero-video" src="{$item.content}" autoplay muted loop playsinline></video>
					{/hkcms:adv}
					<div id="particles" class="hero-particles"></div>

					<div class="hero-overlay"></div>
					<div class="container hero-content">
						<h1 class="hero-title">
							<span class="stroke">燃</span>·觉醒神力
						</h1>
						<p class="hero-sub">哪吒·乾坤宝鉴：神话争锋 — 次时代动作冒险大作</p>
						<div class="hero-cta">
							<a href="#" id="watch-trailer" class="btn btn-primary" role="button">游戏解说</a>
							<a href="#about" class="btn btn-ghost">了解更多</a>
						</div>
					</div>

					<div class="scroll-indicator">
						<span>下滑探索</span>
						<i class="mouse"></i>
					</div>
				</section>

				<!-- ABOUT -->
				<section id="about" class="section section-about about-legacy">
					<div class="decor-corner"></div>
					{hkcms:adv name="about_us" num="1"}
					<div class="container grid-2 about-legacy-wrap">
						<div class="about-legacy-content">
							<h2 class="about-legacy-title">公司简介</h2>
							<div class="about-legacy-sub">Profile</div>
							<div class="about-legacy-text">
								{$item.content}
							</div>
						</div>
						<div class="about-legacy-device">
							<div class="device-frame">
								<img src="{$item.image}" alt="团队合影"/>
							</div>
						</div>
					</div>
					{/hkcms:adv}
				</section>

				<!-- SHOWCASE -->
				<section id="showcase" class="section section-showcase">
					<div class="container">
						<h2 class="sec-title center">游戏亮点</h2>
						<div class="showcase-cards">
							{hkcms:content catid="43" num="3"}
							<article class="card" data-tilt>
								<a href="{$item.url}">
								<img src="{$item.thumb}" alt="{$item.title}" loading="lazy" />
								<div class="card-body">
									<h3>{$item.title}</h3>
									<p>{$item.description}</p>
								</div></a>
							</article>
							{/hkcms:content}
						</div>
					</div>
				</section>

				<!-- NEWS -->
				<section id="news" class="section section-news">
					<div class="container">
						<h2 class="sec-title">公司动态</h2>
						<div id="news-list" class="news-list">
							{hkcms:content catid="9" num="6"}
							<article class="news-item">
								<div class="thumb"><a href="{$item.url}"><img src="{$item.thumb}" alt="{$item.title}" loading="lazy"/></a></div>
								<div class="meta">
									<div class="news-date">{hkcms:date name="$item['publish_time']" format="Y-m-d H:i"}</div>
									<div class="news-title"><a href="{$item.url}">{$item.title}</a></div>
									<p class="news-desc">{$item.description}</p>
								</div>
								<div class="news-more"><a href="{$item.url}">查看详情</a></div>
							</article>
							{/hkcms:content}
						</div>
					</div>
				</section>

				<!-- GUARDIAN -->
				<section id="guardian" class="section section-guardian hero-block">
					<div class="container guardian-wrap">
						{hkcms:adv name="guardian" num="1"}
						<div class="guardian-content">
							<div class="kicker">Guardian</div>
							<h2 class="about-title">家长监护 · 未成年人保护</h2>
							{$item.content}
						</div>
						<div class="guardian-media">
							<div class="media-main" data-parallax="0.15">
								<img src="{$item.image}" alt="监护示意" />
							</div>
							<div class="media-float chip" data-parallax="0.28">防沉迷</div>
							<div class="media-float sticker" data-parallax="0.22">实名认证</div>
						</div>
						{/hkcms:adv}
					</div>
				</section>

			</main>

			<!-- Video Modal -->
			<div id="video-modal" class="modal" aria-hidden="true" aria-labelledby="video-modal-title" role="dialog">
				<div class="modal-backdrop" data-close-modal></div>
				<div class="modal-dialog" role="document">
					<button class="modal-close" type="button" aria-label="关闭" data-close-modal>×</button>
					<h3 id="video-modal-title" class="sr-only">哪吒·乾坤宝鉴</h3>
					<div class="modal-body">
						{hkcms:adv name="home_promotional_video" num="1"}
						<video id="modal-video" data-src="{$item.content}" controls playsinline></video>
						{/hkcms:adv}
					</div>
				</div>
			</div>

			<!-- 引用底部文件，通常把通用的html代码块放到一个文件里面，使用include标签引用 -->
			{include file="common/footer"}
		</div>
	</body>
</html>
